﻿/// <reference path="ADS.js" />

/*--------Item Style Design--------------*/
ADS.addEvent(window, 'load', styleDesign);
function styleDesign() {
    
    //初始化已选择的样式 
        styleInit();
    var keys = ADS.getElementByClassName('style_name', 'a');
    for (var i = 0; i < keys.length; i++) {
        ADS.addEvent(keys[i], 'click', function () {
            var id = this.id.substring(4, this.id.length);
            var divs = ADS.getElementByClassName('style_selecter', 'div');
            for (var j = 0; j < divs.length; j++) {
                divs[j].style.display = 'none';
            }
            showStyle(id);
        });
    }
    var values = ADS.getElementByClassName('style_value', 'input');
    for (var i = 0; i < values.length; i++) {
        ADS.addEvent(values[i], 'click', function () {
            if (this.title != -1) {
                var id = this.id.substring(6, this.id.length);
                var divs = ADS.getElementByClassName('style_selecter', 'div');
                for (var j = 0; j < divs.length; j++) {
                    divs[j].style.display = 'none';
                }
                showStyle(id);
            }
        });
    }
    //输入内容后自动搜索
    //隐藏不匹配的数据，不需要通过ajax重新查询
    var inputs = ADS.getElementByClassName('search', 'input');
    for (var i = 0; i < inputs.length; i++) {
        ADS.addEvent(inputs[i], 'keyup', function () {
            var id = this.id.substring(7, this.id.length);
            var param = this.value.toLowerCase();
            //根据参数的查询放到了applyRule方法中
            applyRule(ADS.$('list_' + id),param);
        });
    }
    //div层的关闭按钮
    var divX = ADS.getElementByClassName('closediv', 'span');
    for (var i = 0; i < divX.length; i++) {
        ADS.addEvent(divX[i], 'click', function () {
            this.parentNode.style.display = 'none';
        });
    }
}

//显示样式查询页面
function showStyle(id) {
    if (ADS.$('key_' + id).title.indexOf('inited')==-1) {
        initStyle(id);
        applyRule(ADS.$('list_' + id));
    }
    else {
        applyRule(ADS.$('list_' + id));
    }
    ADS.$('selecter_' + id).style.display = 'inline';
    ADS.$('select_' + id).focus();
}
//初始化样式
function initStyle(id) {
    var selector = ADS.$('selecter_' + id);
    var list = ADS.$('list_' + id);
    var valuelist = ADS.$('value_' + id).value;
    var orderid = ADS.$('hforderid').value;
    var url = '/Order/ashx/styleSelect.ashx?pid=' + id + '&valuelist='
        + valuelist + '&orderid=' + orderid + '&selectedlist=' + getSelectedStyle() + '&t=' + Math.random();
    ADS.ajaxRequest(url,
        {
            completeListener: function () {
                list.innerHTML = this.responseText;
                //标记为样式已经通过Ajax初始化
                ADS.$('key_' + id).title += ' inited';
                //添加鼠标滑过的效果
                var items = ADS.getElementByClassName('style_item', 'div');
                for (var j = 0; j < items.length; j++) {
                    ADS.addEvent(items[j], 'mouseover', function () {
                        this.style.border = '1px solid #E9ECD7';
                        this.style.background = '#E9ECD7';
                    })
                    ADS.addEvent(items[j], 'mouseout', function () {
                        this.style.border = 0;
                        this.style.background = '';
                    });
                }
            },
            errorListener: function () {
                list.innerHTML = this.statusText;
            }
        });
}
//获取相应规则
function applyRule(list,param) {
    var keyid = list.id.substring(5, list.id.length);
    var url = '/Order/ashx/styleSelect.ashx?keyid=' + keyid + '&selectedlist=' + getSelectedStyle() + '&t=' + Math.random()
    ADS.ajaxRequest(url,
        {
            completeListener: function () {
                var nodes = list.childNodes;
                var coExist = false;
                var unExist = false;
                for (var i = 0; i < nodes.length; i++) {
                    nodes[i].className = 'style_item';
                }
                if (this.responseText != '') {
                    var rule = this.responseText.split('-');
                    var idlist = rule[1].split(',');
                    for (var i = 0; i < idlist.length; i++) {
                        if (rule[0] == '0') {
                            ADS.$(idlist[i]).className = 'style_item unExist';
                            unExist = true;
                        }
                        else {
                            ADS.$(idlist[i]).className = 'style_item coExist';
                            coExist = true;
                        }
                    }
                    if (coExist) {
                        for (var i = 0; i < nodes.length; i++) {
                            if (nodes[i].className.indexOf('coExist') == -1) {
                                nodes[i].className = 'style_item unExist';
                            }
                        }
                    }
                }
                if (param != null) {
                    for (var j = 0; j < nodes.length; j++) {
                        if (nodes[j].innerHTML.toLowerCase().indexOf(param) == -1) {
                            nodes[j].className = 'style_item unExist';
                        }
                    }
                }

            },
            errorListener: function () {
                alert('Can not apply the rules!');
            }
        });
}


//获取所有已选择的样式
function getSelectedStyle() {
    var selectedlist = '';
    var selectedvalues = ADS.getElementByClassName('style_value');
    for (var i = 0; i < selectedvalues.length; i++) {
        if (selectedvalues[i].title != ''&&selectedvalues[i].title.indexOf(',')==-1) {
            selectedlist += selectedvalues[i].title + ',';
        }
    }
    return selectedlist.length > 0 ? selectedlist.substr(0, selectedlist.length - 1) : '';
}
//点击styleoption后执行的操作
function selectOption(option, checked, keyid, valueid) {
    //apply option rule
    var url = '/Order/ashx/styleSelect.ashx?keyid=' + keyid + '&selectedlist=' + valueid + '&t=' + Math.random()
    ADS.ajaxRequest(url, {
        completeListener: function () {
            var rulelist = this.responseText.split('-')[1];
            var rule = rulelist.split(',');
            for (var i = 0; i < rule.length; i++) {
                ADS.$('option_' + rule[i]).disabled = checked;
            }
        },
        errorListener: function () {
            alert('Can not apply the option rule!');
        }
    })


    var optionvalue = ADS.nextElement(option, 'label').innerHTML;
    var idlist = ADS.$('value_' + keyid).title;
    var valuelist = "";
    if (ADS.$('value_' + keyid).value != 'UnSelected') {
        var valuelist = ADS.$('value_' + keyid).value;
    }
    if (checked) {
        idlist += ',' + valueid;
        valuelist += ',' + optionvalue;
    }
    else {
        var ids = idlist.split(',');
        idlist = '';
        for (var i in ids) {
            if (ids[i] != valueid) {
                idlist += ',' + ids[i];
            }
        }
        var values = valuelist.split(',');
        valuelist = '';
        for (var i in values) {
            if (values[i] != optionvalue) {
                valuelist += ',' + values[i];
            }
        }
    }
    if (idlist.indexOf(',') == 0) {
        idlist = idlist.substr(1, idlist.length - 1);
    }
    if (valuelist.indexOf(',') == 0) {
        valuelist = valuelist.substr(1, valuelist.length - 1);
    }
    if (idlist.length != 0 && valuelist.length != 0) {
        ADS.$('select_' + keyid).vlaue = valuelist;
        ADS.$('value_' + keyid).value = valuelist;
        ADS.$('value_' + keyid).title = idlist;
        ADS.$('value_' + keyid).style.color = 'gray';
    }
    else {
        ADS.$('select_' + keyid).vlaue = valuelist;
        ADS.$('value_' + keyid).value = 'UnSelected';
        ADS.$('value_' + keyid).title = idlist;
        ADS.$('value_' + keyid).style.color = 'red';
    }
}
//点击styleitem后执行的操作
function selectitem(keyid, valueid, value, item) {
    ADS.$('select_' + keyid).value = value;
    ADS.$('value_' + keyid).value = value;
    ADS.$('value_' + keyid).title = valueid;
    ADS.$('value_' + keyid).style.color = 'gray';
    item.parentNode.parentNode.style.display = 'none';
}

function styleInit(ddl) {
    var keyvalue = '';
    var values = ADS.getElementByClassName('style_value', 'input');
    if (ddl == null) {
        if (ADS.$('hfKeyValue')) {
            keyvalue = ADS.$('hfKeyValue').value.split('$');
            for (var i = 0; i < values.length; i++) {
                for (var j = 0; j < keyvalue.length; j++) {
                    var value = keyvalue[j].split('=');
                    if (value[0] == values[i].id.substring(6, values[i].id.length)) {
                        values[i].title = value[1];
                        if (value[2] != '') {
                            values[i].value = value[2];
                            values[i].style.color = 'gray';
                        }
                        else {
                            values[i].value = 'UnSelected';
                            values[i].style.color = 'red';
                        }

                    }
                }
            }
        }
    }
    else {
        ADS.ajaxRequest('/Order/ashx/styleModel.ashx?modelid=' + ddl + '&t=' + Math.random(), {
            completeListener: function () {
                keyvalue = this.responseText.split('$');
                for (var i = 0; i < values.length; i++) {
                    for (var j = 0; j < keyvalue.length; j++) {
                        var value = keyvalue[j].split('=');
                        if (value[0] == values[i].id.substring(6, values[i].id.length)) {
                            values[i].title = value[1]
                            if (value[2] != '') {
                                values[i].value = value[2];
                                values[i].style.color = 'gray';
                            }
                            else {
                                values[i].value = 'UnSelected';
                                values[i].style.color = 'red';
                            }
                        }
                    }
                }
            },
            errorListener: function () {
                alert('There is sth. worong with the model function,pls wait for repairation');
            }
        });
    }

}

function Tong_MoveDiv() {
    //参数说明
    // id 要移动的层ID
    // Evt 是 event, window.event; 要在FF 中可以用    e ? e :window.event;
    this.Move = function (Id, Evt) {
        if (Id == "") return;
        var o = document.getElementById(Id);
        if (!o) return;
        evt = Evt ? Evt : window.event;
        o.style.position = "absolute"; //设定他的样式为绝对定位
        o.style.zIndex = 200; //这里显示上下的
        var obj = evt.srcElement ? evt.srcElement : evt.target; //得到个原素 使它在FF中也可以用
        //得到当前对要移动对象的 坐标
        var w = o.offsetWidth;
        var h = o.offsetHeight;
        var l = o.offsetLeft;
        var t = o.offsetTop;
        var div = document.createElement("DIV"); //新原素DIV
        document.body.appendChild(div);
        div.style.cssText = "filter:alpha(Opacity=10,style=0);opacity:0.2;width:" + w + "px; height:" + h + "px;top:" + t + "px;left:" + l + "px;position:absolute;background:#000"; // 设定 filter； 注意opacity 是FF中的 Opacity
        div.setAttribute("id", Id + "temp");

        this.Move_OnlyMove(Id, evt);

    }

    //移动函数
    //参数 Id 要移动的层ID
    //Evt 是 event, window.event; 要在FF 中可以用    e ? e :window.event;
    this.Move_OnlyMove = function (Id, Evt) {
        var o = document.getElementById(Id + "temp");
        if (!o) return;
        evt = Evt ? Evt : window.event; //都是FF 才要这么写的
        var relLeft = evt.clientX - o.offsetLeft; //得到左边的 宽度
        var relTop = evt.clientY - o.offsetTop; //得到上边的 宽度
        //抓取 事件
        if (!window.captureEvents) {
            o.setCapture(); //指定 抓取 事件

        }
        else {
            window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
        }

        //文档的 onmousemove 事件
        document.onmousemove = function (e) {
            if (!o) return;
            e = e ? e : window.event;
            if (e.clientX - relLeft <= 0)
                o.style.left = 0 + "px";
            else if (e.clientX - relLeft >= document.documentElement.clientWidth - o.offsetWidth - 2)
                o.style.left = (document.documentElement.clientWidth - o.offsetWidth - 2) + "px";
            else
                o.style.left = e.clientX - relLeft + "px";
            if (e.clientY - relTop <= 1)
                o.style.top = 1 + "px";
            else if (e.clientY - relTop >= document.documentElement.clientHeight - o.offsetHeight - 30)
                o.style.top = (document.documentElement.clientHeight - o.offsetHeight - 30) + "px";
            else
                o.style.top = e.clientY - relTop + "px";

//            o.style.left = e.clientX - relLeft + "px";
//            o.style.top = e.clientY - relTop + "px";
        }

        //文档的 onmouseup 事件
        document.onmouseup = function () {
            if (!o) return;
            if (!window.captureEvents)
                o.releaseCapture();
            else
                window.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP);
            var o1 = document.getElementById(Id);
            if (!o1) return;
            var l0 = o.offsetLeft;
            var t0 = o.offsetTop;
            var l = o1.offsetLeft;
            var t = o1.offsetTop;
            MyMove.Move_e(Id, l0, t0, l, t);
            document.body.removeChild(o);
            o = null;
        }
    }

    this.Move_e = function (Id, l0, t0, l, t) {
        if (typeof (window["ct" + Id]) != "undefined") clearTimeout(window["ct" + Id]);
        var o = document.getElementById(Id);
        if (!o) return;
        var sl = st = 8;
        var s_l = Math.abs(l0 - l);
        var s_t = Math.abs(t0 - t);
//        if (s_l - s_t > 0)
//            if (s_t)
//                sl = Math.round(s_l / s_t) > 8 ? 8 : Math.round(s_l / s_t) * 6;
//            else
//                sl = 0;
//        else
//            if (s_l)
//                st = Math.round(s_t / s_l) > 8 ? 8 : Math.round(s_t / s_l) * 6;
//            else
//                st = 0;
        if (l0 - l < 0) sl *= -1;
        if (t0 - t < 0) st *= -1;
        if (Math.abs(l + sl - l0) < 52 && sl) sl = sl > 0 ? 2 : -2;
        if (Math.abs(t + st - t0) < 52 && st) st = st > 0 ? 2 : -2;
        if (Math.abs(l + sl - l0) < 16 && sl) sl = sl > 0 ? 1 : -1;
        if (Math.abs(t + st - t0) < 16 && st) st = st > 0 ? 1 : -1;
        if (s_l == 0 && s_t == 0) return;
        //有移动效果
//        if (Math.abs(l + sl - l0) < 2)
//            o.style.left = l0 + "px";
//        else
//            o.style.left = l + sl + "px";
//        if (Math.abs(t + st - t0) < 2)
//            o.style.top = t0 + "px";
//        else
//            o.style.top = t + st + "px";
//        window["ct" + Id] = window.setTimeout("MyMove.Move_e('" + Id + "', " + l0 + " , " + t0 + ", " + (l + sl) + ", " + (t + st) + ")", 1);

        //无效果
        if (Math.abs(l + sl - l0) < 2)
        o.style.left = l0 + "px";
        else
            o.style.left = l + sl +"px";
        if (Math.abs(t + st - t0) < 2)
        o.style.top = t0 + "px";
        else
            o.style.top = t + st +"px";
        window["ct"+ Id] = window.setTimeout("MyMove.Move_e('"+ Id +"', "+ l0 +" , "+ t0 +", "+ (l + sl) +", "+ (t + st) +")", 1);



    }


}
var MyMove = new Tong_MoveDiv();
